<template>
  <div class="tab-pane-wrapper" v-loading.fullscreen.lock="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="search">
      <div class="radio-box form-search cur-page">
        <el-radio-group v-model="paramName" @change="radioChange">
          <el-radio label="内水冷">内水冷</el-radio>
          <el-radio label="桥臂">桥臂</el-radio>
          <!-- <el-radio label="子模块">子模块</el-radio>
          <el-radio label="测点">测点</el-radio> -->
        </el-radio-group>
      </div>
      <el-form class="form-search" :model="form" inline>

        <el-form-item label="换流阀">
          <el-select style="width: 110px" clearable v-model="form.controlName" placeholder="请选择">
            <el-option v-for="item in valueList" :label="item" :value="item" :key="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="桥臂" v-if="paramName !== '内水冷'">
          <el-select style="width: 110px" clearable v-model="form.bridgeName" placeholder="请选择">
            <el-option v-for="item in bridgeList" :label="item" :value="item" :key="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="子模块" v-if="paramName === '子模块' || paramName === '测点'">
          <el-select style="width: 110px" clearable v-model="form.submoduleName" placeholder="请选择" filterable>
            <el-option v-for="(item, index) in modelList" :label="item" :value="index + 1" :key="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测点" v-if="paramName === '内水冷'">
          <el-select style="width: 110px" clearable v-model="form.pointName" placeholder="请选择">
            <el-option v-for="(item, idx) in pointList" :label="item" :value="item" :key="idx">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间">
          <el-date-picker style="width: 420px" v-model="form.date" start-placeholder="开始日期" end-placeholder="结束日期"
            type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" :unlink-panels="true"
            :clearable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <label class="btn-nav-bg stripe-btn" @click="getInit(true)">查 询</label>
          <!--          <label class="btn-nav-bg stripe-btn" @click="exportData"-->
          <!--            >预警报告</label-->
          <!--          >-->
        </el-form-item>
      </el-form>
    </div>
    <div class="sec-content">
      <sec-container class="middle" title="">
        <div class="scroll dialog-scroll">
          <div @click="warnClick(item, index)" v-for="(item, index) in warnNewList" :key="index + 'third'" class="item"
            :class="{ 'active': curId === (index + (pagerSelf.currentPage - 1) * 10) }"
          >
            <p>
              {{ item.message }}
              <!-- {{ item.stationName || "" }}{{ item.controlName || ""
              }}{{ item.bridgeName || "" }}{{ item.modelName || ""
              }}{{ item.pointName || "" }} -->
            </p>
            <div class="tip">
              <span>{{ item.alarmTime }}</span>
              <el-tag type="" color="#075d78" size="mini">{{
                paramName
              }}</el-tag>
            </div>
          </div>
        </div>
        <div class="f-pagination">
          <el-pagination v-show="pagerSelf.total > 0" style="text-align: right" background :page-sizes="[10, 15, 20]"
            @size-change="handleSizeChangeSelf" @current-change="handleCurrentChangeSelf"
            :current-page.sync="pagerSelf.currentPage" :page-size.sync="pagerSelf.pageSize" :hide-on-single-page="false"
            layout="total, prev, pager, next,jumper" :total="pagerSelf.total"></el-pagination>
        </div>
      </sec-container>
      <sec-container class="middle" title="">
        <h3>故障定位</h3>
        <p v-html="faultLocalization" style="height: 120px; overflow-y: auto"></p>
        <div v-if="paramName !== '桥臂'" style="height: calc(100% - 150px)">
          <h3>数据采集波形图</h3>
          <div class="chart-box" style="height: calc(100% - 30px)">
            <el-form ref="form" :model="formData" inline label-width="130px" class="form-search">
              <el-form-item>
                <el-date-picker style="width: 400px" v-model="formData.date" start-placeholder="开始日期"
                  end-placeholder="结束日期" type="datetimerange" :unlink-panels="true" value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss" clearable>
                </el-date-picker>
              </el-form-item>
              <el-form-item v-if="paramName === '子模块'">
                <el-select style="width: 150px" v-model="formData.pointName" clearable placeholder="请选择">
                  <el-option v-for="(item, idx) in formData.pointList" :label="item.label" :value="item.value"
                    :key="idx">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="paramName === '内水冷'">
                <el-select style="width: 150px" v-model="formData.pointName" clearable placeholder="请选择">
                  <el-option v-for="(item, idx) in formData.pointList" :label="item.label" :value="item.value"
                    :key="idx">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button class="btn-nav-bg stripe-btn" @click="handleChart">查询</el-button>
              </el-form-item>
            </el-form>
            <div class="chart-box" style="height: calc(100% - 40px)">
              <linebar style="width: 100%; height: 100%" :grid="grid" legendLeft="80%" :rotate="-15"
                :axisLabelColor="'rgba(198,211,236)'" :datas="chartData.data" :xAxis="chartData.xAxis"
                :dataZoom="chartData.dataZoom" :isShowTooltip="true"></linebar>
            </div>
          </div>
        </div>
      </sec-container>
    </div>
  </div>
</template>
<script>
import SecContainer from "@/components/SecContainer";
import Linebar from "@/components/Linebar.vue";
import { huanliufa, cedian, bridgeList, zimukuai } from '@/assets/data';
import {
  postZdyjHistoryKbSlAlarmPage,
  postZdyjHistoryKbQbAlarmPage,
  getZdyjHistoryKbSlAlarmTrend,
  postZdyjHistoryKbZmkAlarmPage,
  postZdyjHistoryKbDwAlarmPage,
  postZdyjHistoryKbDwAlarmTrend,
} from '../api';

export default {
  name: "history",
  props: {

  },
  components: {
    Linebar,
    SecContainer,
  },
  data() {
    return {
      fullscreenLoading: false,
      curId: 0,
      paramName: "内水冷",
      form: {
        controlName: "", //换流阀数据
        bridgeName: "", //桥臂名称
        submoduleName: "",
        pointName: "",
        date: [
          this.$moment()
            .subtract(29, "days")
            .startOf("day")
            .format("YYYY-MM-DD HH:mm:ss"),
          this.$moment()
            .subtract(0, "days")
            .endOf("day")
            .format("YYYY-MM-DD HH:mm:ss"),
        ],
      },
      valueList: [], //换流阀数据
      bridgeList: [], //桥臂数据
      modelList: [], // 子模块
      pointList: [], //测点数据

      // {{ item.stationName || "" }}{{ item.controlName || ""
      //         }}{{ item.bridgeName || "" }}{{ item.modelName || ""
      //         }}{{ item.pointName || "" }}
      warnNewList: [], // 列表数据
      formData: {
        date: [],
        type: "",
        pointName: "",
        pointList: [],
        electrodeName: '', //保存换流阀名称
        bridgeName: '', //桥臂名称
      },
      faultLocalization: "", // 告警数据
      grid: {
        containLabel: true,
        left: "2%",
        top: "24",
        right: "12%",
        bottom: "10%",
      }, // 图形数据
      chartData: {
        data: [
          {
            type: "line",
            name: "",
            color: "#5087ec",
            showSymbol: true,
            smooth: true,
            data: [],
          },
        ],
        xAxis: [],
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: 10,
            left: 80,
            right: 80,
            start: 0,
            end: 50,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: { color: "#d3dee5" },
            textStyle: { color: "#fff" },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
      }, // 图形数据
      pagerSelf: {
        pageSize: 10, // 每页数据量
        currentPage: 1, // 分页  当前页
        total: 0, //列表总数
      }, // 分页数据
      waveFormData: {}, // 保存点击数据
    };
  },
  methods: {
    // 列表点击
    warnClick(item, index) {
      this.faultLocalization = item.faultLocalization ? item.faultLocalization.replace(/\n/g, "<br>") : '';
      this.formData.date = [item.startTime, item.endTime];
      this.curId = index + (this.pagerSelf.currentPage - 1) * 10;
      if (this.paramName === "内水冷") {
        this.waveFormData = { ...item };
        let params = {
          electrodeName: item.electrodeName,
          startTime: this.formData.date[0],
          endTime: this.formData.date[1],
          locationName: this.$route.query.site,
          sample: this.formData.pointName,
        };
        this.getXJHistoryWaterWaveformData(params);
      } else if (this.paramName === "子模块") {
        this.waveFormData = { ...item };
        let params = {
          bridgeName: item.bridgeName,
          electrodeName: item.electrodeName,
          endTime: item.endTime,
          locationName: item.locationName,
          moduleNo: item.moduleNo,
          pointKey: this.formData.pointName,
          startTime: item.startTime,
        };
        this.getXJHistoryPointWaveformData(params);
      } else if (this.paramName === "测点") {
        this.waveFormData = { ...item };
        let params = {
          bridgeName: item.bridgeName,
          electrodeName: item.electrodeName,
          endTime: item.endTime,
          locationName: item.locationName,
          moduleNo: item.moduleNo,
          pointKey: this.formData.pointName,
          startTime: item.startTime,
        };
        this.getXJHistoryPointWaveformData(params);
      }
    },
    //  查询图形
    handleChart() {
      if (this.paramName === "内水冷") {
        if (this.formData.date) {
          let params = {
            electrodeName: this.formData.electrodeName,
            endTime: this.formData.date[1],
            startTime: this.formData.date[0],
            locationName: this.$route.query.site,
            sample: this.formData.pointName,
          };
          this.getXJHistoryWaterWaveformData(params);
        } else {
          alert('请选择日期')
        }
      } else if (this.paramName === "子模块") {
        let params = {
          bridgeName: this.waveFormData.bridgeName,
          electrodeName: this.waveFormData.electrodeName,
          endTime: this.formData.date[1],
          locationName: this.waveFormData.locationName,
          moduleNo: this.waveFormData.moduleNo,
          pointKey: this.formData.pointName,
          startTime: this.formData.date[0]
        };
        this.getXJHistoryPointWaveformData(params);
      } else if (this.paramName === "测点") {
        let params = {
          bridgeName: this.waveFormData.bridgeName,
          electrodeName: this.waveFormData.electrodeName,
          endTime: this.formData.date[1],
          locationName: this.waveFormData.locationName,
          moduleNo: this.waveFormData.moduleNo,
          pointKey: this.formData.pointName,
          startTime: this.formData.date[0]
        };
        this.getXJHistoryPointWaveformData(params);
      }
    },
    // 切换tab
    radioChange() {
      this.chartData = {
        data: [
          {
            type: "line",
            name: "",
            color: "#5087ec",
            showSymbol: true,
            smooth: true,
            data: [],
          },
        ],
        xAxis: [],
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: 10,
            left: 80,
            right: 80,
            start: 0,
            end: 50,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: { color: "#d3dee5" },
            textStyle: { color: "#fff" },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
      },
        this.getInit(true);
    },
    // 获取初始数据
    getInit(flag) {
      if (flag) this.pagerSelf.currentPage = 1;
      this.curId = 0;
      if (this.form.date) {
        let params;
        if (this.paramName === '内水冷') {
          params = {
            endTime: this.form.date[1],
            startTime: this.form.date[0],
            locationName: this.$route.query.site,
            electrodeName: this.form.controlName,
            keyword: this.form.pointName,
            currentPage: this.pagerSelf.currentPage,
            size: this.pagerSelf.pageSize,
          }
        } else if (this.paramName === '桥臂') {
          params = {
            endTime: this.form.date[1],
            locationName: this.$route.query.site,
            startTime: this.form.date[0],
            bridgeName: this.form.bridgeName,
            electrodeName: this.form.controlName,
            currentPage: this.pagerSelf.currentPage,
            size: this.pagerSelf.pageSize,
          }
        } else if (this.paramName === '子模块') {
          params = {
            endTime: this.form.date[1],
            locationName: this.$route.query.site,
            startTime: this.form.date[0],
            bridgeName: this.form.bridgeName,
            moduleNo: this.form.submoduleName,
            currentPage: this.pagerSelf.currentPage,
            size: this.pagerSelf.pageSize,
          }
        } else if (this.paramName === '测点') {
          params = {
            endTime: this.form.date[1],
            locationName: this.$route.query.site,  // 换流站
            startTime: this.form.date[0],
            bridgeName: this.form.bridgeName, // 桥臂
            electrodeName: this.form.controlName,// 换流阀
            moduleNo: this.form.submoduleName, // 子模块
            currentPage: this.pagerSelf.currentPage,
            size: this.pagerSelf.pageSize,
          }
        }
        this.getXJHistoryData(params);
      } else {
        alert('请选择日期')
      }

    },
    // 获取列表数据
    getXJHistoryData(params) {
         this.fullscreenLoading = true;
      let API;
      if (this.paramName === "桥臂") {
        API = postZdyjHistoryKbQbAlarmPage;
      } else if (this.paramName === "内水冷") {
        API = postZdyjHistoryKbSlAlarmPage;
      } else if (this.paramName === "子模块") {
        API = postZdyjHistoryKbZmkAlarmPage;
      } else if (this.paramName === "测点") {
        API = postZdyjHistoryKbDwAlarmPage;
      }
      API(params).then((res) => {
           this.fullscreenLoading = false;
        if (res.code == 200) {
          this.warnNewList = res.data.records;
          this.pagerSelf.total = Number(res.data.total);
          if (res.data.records.length) {
            if (this.paramName === "内水冷") {
                 const str = res.data.records[0].selected.filter(item => item.checked);
              this.faultLocalization = res.data.records[0].faultLocalization.replace(/\n/g, "<br>");
              this.formData.date = [res.data.records[0].startTime, res.data.records[0].endTime]
              this.formData.pointList = res.data.records[0].selected;
              this.formData.electrodeName = res.data.records[0].electrodeName;
              this.formData.pointName = str[0].value;
              const prams = {
                electrodeName: res.data.records[0].electrodeName,
                endTime: this.formData.date[1],
                startTime: this.formData.date[0],
                locationName: this.$route.query.site,
                sample: str[0].value,
              }
              this.getXJHistoryWaterWaveformData(prams)
            } else if (this.paramName === '桥臂') {
              this.faultLocalization = res.data.records[0].faultLocalization.replace(/\n/g, "<br>");
            } else if (this.paramName === '子模块') {
              this.faultLocalization = res.data.records[0].faultLocalization.replace(/\n/g, "<br>");
              this.formData.date = [res.data.records[0].startTime, res.data.records[0].endTime]
              this.formData.bridgeName = res.data.records[0].bridgeName;
              this.formData.electrodeName = res.data.records[0].electrodeName;
              this.formData.moduleNo = res.data.records[0].moduleNo;
              this.formData.pointName = res.data.records[0].selected[0].value;
              this.formData.pointList = res.data.records[0].selected;
              const prams = {
                bridgeName: res.data.records[0].bridgeName,
                endTime: this.formData.date[1],
                startTime: this.formData.date[0],
                electrodeName: res.data.records[0].electrodeName,
                locationName: this.$route.query.site,
                moduleNo: res.data.records[0].moduleNo,
                pointKey: res.data.records[0].selected[0].value,
              }
              this.getXJHistoryPointWaveformData(prams)
            } else if (this.paramName === '测点') {
              this.faultLocalization = res.data.records[0].faultLocalization.replace(/\n/g, "<br>");
              this.formData.date = [res.data.records[0].startTime, res.data.records[0].endTime]
              this.formData.bridgeName = res.data.records[0].bridgeName; // 桥臂
              this.formData.electrodeName = res.data.records[0].electrodeName; // 换流阀
              this.formData.moduleNo = res.data.records[0].moduleNo; // 子模块
              this.formData.pointName = res.data.records[0].selected[0].value; // 测点
              const prams = {
                bridgeName: res.data.records[0].bridgeName,
                endTime: this.formData.date[1],
                startTime: this.formData.date[0],
                electrodeName: res.data.records[0].electrodeName,
                locationName: this.$route.query.site,
                moduleNo: res.data.records[0].moduleNo,
                pointKey: res.data.records[0].selected[0].value,
              }
              this.getXJHistoryPointWaveformData(prams)
            }
          }
        }
      });
    },
    // 分页操作
    handleSizeChangeSelf(val) {
      this.pagerSelf.pageSize = val;
      this.getInit();
    },
    // 分页操作
    handleCurrentChangeSelf(val) {
      this.pagerSelf.currentPage = val;
      this.getInit();
    },

    // 内水冷波形图
    getXJHistoryWaterWaveformData(params) {
   
      getZdyjHistoryKbSlAlarmTrend(params).then((res) => {
        if (res.code == 200) {
          this.chartData.xAxis = res.data.map((item) => item.time);
          this.chartData.data[0].data = res.data.map((item) => item.value);
          this.chartData.data[1].data =
            "ceiling" in res.data
              ? Array(res.data.length).fill(res.data.ceiling)
              : [];
          this.chartData.data[2].data =
            "floor" in res.data
              ? Array(res.data.length).fill(res.data.floor)
              : [];
        }
      });
    },

    // 子模块&测点告警历史数据，数据采集波形图
    getXJHistoryPointWaveformData(params) {
      postZdyjHistoryKbDwAlarmTrend(params).then((res) => {
        if (res.code == 200) {
          this.chartData.xAxis = res.data.map((item) => item.time);
          this.chartData.data[0].data = res.data.map((item) => item.value);
        }
      });
    },
    // 监听弹窗关闭
    switchVisable(visable, ref) {
      this[ref] = visable;
    },
  },
  mounted() {
    const time = JSON.parse(sessionStorage.getItem('duibifenxiTime'));
    if (time) {
      this.form.date = [time.startTime, time.endTime];
      sessionStorage.removeItem('duibifenxiTime')
    }
    if (this.$route.query.paramName) {
      this.paramName = this.$route.query.paramName;
    }
    // 获取换流阀数据
    this.valueList = huanliufa;
    // 获取测点数据
    this.pointList = cedian;
    // 桥臂
    this.bridgeList = bridgeList;
    // 子模块
    this.modelList = zimukuai;
    this.getInit();
  },

};
</script>

<style lang="less">
.radio-box.form-search.cur-page {
  .el-radio-group {
    padding: 0 10px !important;
  }

  .el-radio {
    &:not(:last-child) {
      margin-right: 10px;
    }
  }
}
</style>
<style scoped lang="less">
.tab-pane-wrapper {
  width: 100%;
  height: 100%;

  .search {
    display: flex;
    justify-content: space-between;

    .radio-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .el-radio-group {
        width: auto;
        padding: 0 20px;
      }
    }
  }

  .sec-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: calc(100% - 55px);
    margin-top: 10px;
  }

  ::v-deep(.sec-wrapper) {
    width: calc(50% - 8px);
    height: 100%;

    &:last-child {
      margin-left: 16px;
    }

    h3 {
      line-height: 30px;
      color: #28e9f2;
    }

    p {
      border: 1px solid #3099d1;
      background: rgba(48, 153, 209, 0.2);
      padding: 5px 15px 5px 0;
      color: #ffffff;
      line-height: 30px;
    }

    .scroll {
      height: calc(100% - 25px);
      width: 100%;
      overflow-y: auto;
      box-sizing: border-box;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      &.dialog-scroll {
        display: block;
        height: calc(100% - 70px);

        .item {
          width: 100%;

          p {
            height: auto;
            border: 0px;
            background: transparent;
          }
        }
      }

      // 里面的每一条
      .item {
        cursor: pointer;
        //height: 64px;
        width: 49%;
        box-sizing: border-box;
        border: 1px solid #006686;
        margin-bottom: 10px;
        padding: 0 10px;

        p {
          line-height: 32px;
          height: 32px;
          color: #ffffff;
        }

        .tip {
          line-height: 32px;
          height: 32px;
          display: flex;
          justify-content: space-between;

          span {
            color: #eee;
            font-size: 12px;
          }
        }
      }
    }
         .active {
        background: rgba(48, 153, 209, 0.2);
      }

    .chart-box {}
  }
}
</style>
